<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>文学艺术 - 爱读书</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="renderer" content="webkit"/>
    <script lang="javascript" type="text/javascript" th:src="@{https://libs.baidu.com/jquery/1.11.3/jquery.min.js}"></script>
    <link rel="stylesheet" th:href="@{../../static/css/core.min-20160809.css}">
    <link rel="stylesheet" th:href="@{../../static/css/dushu.min-20160802.css}">
    <link rel="stylesheet" th:href="@{../../static/css/font_1468833227_139596.css}">

    <!--<link rel="alternate" media="only screen and (max-width: 640px)" th:href="@{https://m.dushu.com/lianzai/1115.html}"/>-->
    <!--导入分页样式-->
    <link rel="stylesheet" th:href="@{../../static/pagination/css/pagination.css}">
    <script th:src="@{../../static/pagination/js/pagination.js}"></script>
    <!--獲取总数-->
    <script th:inline="javascript">
        var counts = [[${counts}]];
    </script>
</head>
<body>
<!--实现登录注册-->
<div class="layout bg border-bottom">
    <div class="container height-big text-gray">
        <span class="float-right">
            <a th:href="@{/index/toLogin}" th:text="${session.user}==null?'注册':'欢迎回来'" class="text-gray"></a>
            <span class="text-little">|</span>
            <a th:href="@{/index/toLogin}" class="text-gray" th:text="${session.user}==null?'登陆':${session.user.phone}"></a>
        </span>读书好，好读书，读好书！
    </div>
</div>
<!--可下拉式导航栏-->
<div class="layout bg border-bottom fixed-top hidden" style="z-index: 99;" id="fixednav">
    <div class="container"><div class="row">
        <div class="span4">
            <a href="javascript:;" title="读书网">
                <img th:src="@{/static/picture/login1.png}" alt="爱读书"></a></div>
        <div class="span13">
            <ul class="nav nav-inline nav-menu padding-top">
                <li><a href="/index/toRead" >每日一读</a></li>
                <li><a th:href="@{/index/toNovel/1}" >小说作品</a></li>
                <li><a th:href="@{/index/toNovel/2}" >经济管理</a></li>
                <li><a th:href="@{/index/toNovel/3}">历史传记</a></li>
                <li><a th:href="@{/index/toNovel/4}">生活时尚</a></li>
                <li><a th:href="@{/index/toNovel/5}" >文学艺术</a></li>
                <li><a th:href="@{/index/toNovel/6}" >社会科学</a></li>
                <li><a th:href="@{/index/toNovel/7}" >成功励志</a></li>
            </ul>
        </div>

        <!--轮播图的搜索框-->
        <div class="span7 text-right">
            <form name="searchform" th:action="@{/index/toSearch}" >
                <div class="input-group padding-small-top">
                    <input type="text" class="wd input border-main" name="name" required="required" value="" autocomplete="off" size="30" placeholder="搜索海量图书/电子书/网络小说">
                    <span class="addbtn"><button class="button bg-main"><span class="icon-search"></span></button></span>
                </div>
            </form>
        </div>
    </div>
    </div>
</div>

<!--首页  top-->
<div class="container">
    <div class="row">
        <div class="span8"><a href="javascript:;"  title="爱读书"><img th:src="@{/static/picture/login2.png}" alt="爱读书"></a></div>
        <!--搜索框，通过form表单实现 -->
        <div class="span10 padding-big-top">
            <form name="searchform" th:action="@{/index/toSearch}" >
                <div class="input-group padding-little-top margin-big-right">
                    <input type="text" name="name" class="wd input input-big border-main" required="required" value="" size="30"
                           placeholder="搜索海量图书">
                    <span class="addbtn"><button class="button button-big bg-main" id="search_button"><span
                            class="icon-search text-large"></span></button></span>
                </div>
            </form>
        </div>

        <!--实现我的账户和书架-->
        <div class="span6 padding-large-top text-right">
            <div class="button-group" th:if="${session.user} !=null">
                <button type="button" class="button text-main"><span class="icon-user"></span> <a th:href="@{/index/toAccount/}+${session.user.phone}">我的账户</a></button>
                <button type="button" class="button text-main"><span class="icon-shujia"></span><a th:href="@{/index/toBookshelf/}+${session.user.id}">我的书架</a> </button>
            </div>
            <div class="button-group" th:if="${session.user} ==null">
                <button type="button" class="button text-main"><span class="icon-user"></span> <a href="javascript:;">我的账户</a></button>
                <button type="button" class="button text-main"><span class="icon-shujia"></span><a href="javascript:;">我的书架</a> </button>
            </div>
        </div>

    </div>
</div>

<!--图书分类导航-->
<div class="container">
    <div class="row margin-top">
        <div class="span24">
            <ul class="nav nav-menu nav-inline nav-sub nav-big nav-navicon nav-justified border-dot">
                <li id="ctl00_c1_nav_meiwen"><a  th:href="@{/index/toRead}">每日一读</a></li>
                <li id="ctl00_c1_nav_lianzai" class="active"><a  href="javascript:;" >在线读书</a></li>
                <li id="ctl00_c1_nav_daohang"><a href="#">读书导航</a></li>
            </ul>

            <ul class="nav nav-inline nav-menu margin-top nav-justified subnav">
                <li><a th:href="@{/index/toNovel/1}" >小说作品</a></li>
                <li><span class="sep">|</span></li>
                <li><a th:href="@{/index/toNovel/2}">经济管理</a></li>
                <li><span class="sep">|</span></li>
                <li><a th:href="@{/index/toNovel/5}">文学艺术</a></li>
                <li><span class="sep">|</span></li>
                <li><a th:href="@{/index/toNovel/3}">历史传记</a></li>
                <li><span class="sep">|</span></li>
                <li><a th:href="@{/index/toNovel/4}">生活时尚</a></li>
                <li><span class="sep">|</span></li>
                <li><a th:href="@{/index/toNovel/7}">成功励志</a></li>
                <li><span class="sep">|</span></li>
                <li><a th:href="@{/index/toNovel/6}">社会科学</a></li>
            </ul>
        </div>
    </div>
</div>


<!--内容信息-->
<div class="container margin-top">
    <div class="crumbs">
        当前位置： <a href="https://www.dushu.com">首页</a><span class="icon-crumb"></span><a
            href="https://www.dushu.com/lianzai/">在线阅读</a><span class="icon-crumb"></span><a href="/lianzai/1115.html">小说作品</a>
    </div>
</div>
<div class="container margin-top">
    <div class="row">
        <div class="span5">

            <div class="sub-catalog margin-big-bottom">
                <dl class="active">
                    <dt><span class="icon-du padding-right"></span>文学艺术</dt>
                </dl>
            </div>

            <!--排行榜-->
            <div class="tit text-main"><h3>读书推荐</h3></div>
            <!--内容展示-->
            <div id="J_commend" class="books-left border">
                <ul>
                    <li th:each="book,iterStat:${rankBooks}">
                        <p style="display: none;" class="fold">
                            <a th:href="@{/index/toBookInfo/}+${book.id}" th:title="${book.title}" target="_blank" th:text="${book.title}"><i th:text="${iterStat.count}"></i></a></p>
                        <div class="unfold" style="display: block;">
                            <i th:text="${iterStat.count}"></i>
                            <div>
                                <div class="img80"><a th:href="@{/index/toBookInfo/}+${book.id}" th:title="${book.title}" target="_blank"><img th:alt="${book.title}" th:src="'/index/toHtml?Url='+${book.image}"></a></div>
                                <h3><a th:href="@{/index/toBookInfo/}+${book.id}" th:title="${book.title}" target="_blank" th:text="${book.title}"></a></h3>
                                <p></p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--排序-->
        <div class="span19 padding-left" style="margin-bottom: 50px">
            <div class="books-sort">
                <dl class="dl-horizontal">
                    <dt>排序方式：</dt>
                    <dd class="last">
                        <ul class="list-inline">
                            <li><span class="button bg-main button-small" tite="更新时间降序">更新时间 <span
                                    class="icon-desc"></span></span></li>
                            <li><a href="/lianzai/1115_1.html" class="button button-small" title="访问热度降序">热门 <span
                                    class="icon-desc"></span></a></li>
                        </ul>
                    </dd>
                </dl>
            </div>

            <!--图书展示-->
            <div class="bookslist">
                <ul>
                    <li class="top" th:each="book:${novelBooks}">
                        <div class="book-info">
                            <div class="img152 float-left margin-right"><a th:href="@{/index/toBookInfo/}+${book.id}" target="_blank"><img th:alt="${book.title}" th:src="'/index/toHtml?Url='+${book.image}"></a></div>
                            <h3><a th:href="@{/index/toBookInfo/}+${book.id}" th:title="${book.title}" target="_blank" th:text="${book.title}"></a></h3>
                            <p th:text="${book.author}"></p>
                            <p class="disc eps" th:text="${#strings.abbreviate(book.book_introduction,40)}"></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div id="pages">
        </div>
    </div>
</div>
<div class="layout" id="footer">
    <div class="container padding">
        <div class="text-center">
            <ul class="nav nav-inline">
                <li><a href="1587.html">关于读书</a></li>
                <li><a href="1588.html">免责声明</a></li>
                <li><a href="1589.html">读书目录</a></li>
                <li><a href="1590.html">联系我们</a></li>
            </ul>
        </div>
        <div class="text-center height-big">Copyright © 读书网 www.dushu.com 2005-2020, All Rights Reserved.</div>
        <div class="text-center height-big"><a href="javascript:;">鄂ICP备15019699号</a> <img
                th:src="@{../../static/picture/beian.png}" style="vertical-align:middle;margin-left:10px;"> 鄂公网安备 42010302001612号
        </div>
    </div>
</div>
<!--獲取总数-->
<script th:inline="javascript">
    var counts = [[${counts}]];
</script>
<script>
    $(function () {
        console.log(counts);
       new Pagination({
            element: '#pages',
            type: 1,
            pageIndex: 1,
            pageSize: 30,
            pageCount: 5,
            total: counts,
            jumper: true,
            singlePageHide: false,
            prevText: '上一页',
            nextText: '下一页',
            disabled: true,
            currentChange: function(index) {
                console.log(index);
                bookList(index);
            }
        });
    });
    function bookList(index) {
        $.post(
            "/index/doNovel/5",
            {'page':index},
            function (data) {
                console.log("data:"+data);
                let str = "";
                $.each(data,function (index,book) {
                    let content = book.book_introduction.substring(0,35)+"....";
                    str+= "<li class=\"top\">\n" +
                        "                        <div class=\"book-info\">\n" +
                        "                            <div class=\"img152 float-left margin-right\"><a href=\"/index/toBookInfo/"+book.id+"\" target=\"_blank\"><img th:alt=\""+book.title+"\" src=\"/index/toHtml?Url="+book.image+"\"></a></div>\n" +
                        "                            <h3><a href=\"/index/toBookInfo/"+book.id+"\" title=\""+book.title+"\" target=\"_blank\" >"+book.title+"</a></h3>\n" +
                        "                            <p >"+book.author+"</p>\n" +
                        "                            <p class=\"disc eps\" >"+content+"</p>\n" +
                        "                        </div>\n" +
                        "                    </li>"
                });
                $(".bookslist").find("ul:eq(0)").empty();
                $(".bookslist ").find("ul:eq(0)").append(str);
            }
        )
    }
</script>
<script>
    $(function () {
        $("._jumper").css("display","none");
        $("._pages").css("display","block");
        $("._pages").css("margin-left","10%");
    })
</script>
<script lang="javascript" type="text/javascript" th:src="@{https://a.dushu.com/js/common.min.js?v=201706}"></script>

</body>
</html>
